<template>
  <div class="content-head w100">
    <div class="label common-container">监控中心</div>
    <div class="number-area">
      <div class="number-container common-container" v-for="item in numberArray" :key="item.name">
        <img class="content-left" :src="item.url" :alt="item.name">
        <div class="content-right">
          <div class="name">{{item.name}}</div>
          <div class="number">
            <span>{{item.number.toLocaleString()}}</span>台
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Config from '../../config'
  export default {
    name: 'ContentHead',
    data () {
      return {
        numberArray: [
          {
            url: '../../../../static/image/ShowMap/01.png',
            name: '设备在线数量',
            number: 0
          },
          {
            url: '../../../../static/image/ShowMap/02.png',
            name: '设备离线数量',
            number: 0
          },
          {
            url: '../../../../static/image/ShowMap/03.png',
            name: '水压异常数量',
            number: 0
          },
          {
            url: '../../../../static/image/ShowMap/04.png',
            name: '设备低电量数量',
            number: 0
          },
          {
            url: '../../../../static/image/ShowMap/05.png',
            name: '异常设备数量',
            number: 0
          }
        ]
      }
    },
    computed: {
      ...mapGetters('user', {
        user: 'getUser',
        role: 'getRole',
        district: 'getDistrict'
      })
    },
    mounted () {
      this.getContentHeadData()
    },
    methods: {
      /**
       * 获取在离线，异常，低压，低电数量
       * */
      getContentHeadData () {
        const url = `${Config.DEVICE_MANAGE_URL}/device_stie_user/count`
        const param = {
          devtype: Config.objType.devtype,
          devname: Config.objType.devname
        }
        if (this.role[0].sort === 93) {
          params.site_type='test'
        }else if (this.role[0].sort !== 100) {
          params.site_type='official'
        }
        if (this.district.areaCode) {
          param.id = this.district.districtId
        } else {
          if (this.district.cityCode) {
            param.id = this.district.cityCode
          } else {
            if (this.district.provinceCode) {
              param.id = this.district.provinceCode
            }
          }
        }
        this.$http.get(url, param)
          .then(data => {
            const online = data.iemp_online_count
            const offline = data.all_count - data.iemp_online_count
            this.$set(this.numberArray[0], 'number', online)
            this.$set(this.numberArray[1], 'number', offline)
            this.$set(this.numberArray[2], 'number', data.alert_low_pressure_count)
            this.$set(this.numberArray[3], 'number', data.alert_low_battery_count)
            this.$set(this.numberArray[4], 'number', data.abnormal_count)
            this.$emit('update', {online, offline})
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content-head {
    height: 150px;
    display: flex;
    align-content: flex-start;
    margin-bottom: 20px;
    .label {
      line-height: 150px;
      text-align: center;
      width: 180px;
      margin-right: 10px;
      font-size: 20px;
      font-weight: bold;
      background: linear-gradient(to right, #17B0FF, #1EFEF7);
      -webkit-background-clip: text;
      color: transparent;
      position: relative;
      &::before {
        content: url("../../../static/image/monitor-center/collect.png");
        width: 18px;
        height: 23px;
        position: absolute;
        top: -62px;
        left: 18px;
      }
    }
    .number-area {
      flex: 1;
      display: flex;
      align-content: space-between;
      .number-container {
        margin: 0 10px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        .content-left {
          width: 85px;
          margin: 0 8px 0 20px;
        }
        .content-right {
          flex: 1;
          .name {
            font-size: 18px;
          }
          .number {
            font-size: 18px;
            span {
              font-size: 40px;
              margin-right: 20px;
            }
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
</style>
